<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Regions: mouse events on contents node made up by unknown tags</title>
	<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
	<meta name="assert" content="Mouse event handlers set on content nodes, even if they're unknown elements should fire">
	<meta name="flags" content="dom interact">
	<style>
	body {
		margin: 0;
		padding: 20px;
	}
	p {
		margin: 0;
	}
	.box {
		width: 200px;
		height: 200px;
		float: left;
		margin: 20px;
	}
	.smallbox {
		width: 75px;
		height: 200px;
		float: left;
		margin: 20px;
	}

	#source {
		color: green;
		background-color: lightcyan;
	}
	#source foobar {
		flow-into: flow1;
	}
	#region1 {
		flow-from: flow1;
	}
	#source barbaz {
		flow-into: flow2;
	}
	#region2 {
		flow-from: flow2;
	}
	#source bazzaz {
		flow-into: flow3;
	}
	#region3 {
		flow-from: flow3;
	}

	foo,
	foobar,
	barbaz,
	barbaz span,
	bazzaz {
		display: block;
		width: 100%;
		height: 100px;
		background-color: green;
	}

	.region {
		background-color: yellow;
	}
	.region p {
		margin-top: 100px;
		width: 100%;
		height: 100px;
		background-color: red;
	}

	#result {
		clear: both;
		font-weight: bold;
	}
	.pass {
		color: green;
	}
	.fail {
		color: red;
	}
	</style>
</head>
<body>
	For each of the three narrow boxes on the right of the cyan square:
	<ol>
		<li>Mouse over the green rectangle and click</li>
		<li>Mouse over the yellow rectangle and click</li>
		<li>You should see "PASS" appearing below</li>
		<li>You should not see any red, or the word "FAIL"</li>
	</ol>
	<div id="source" class="box">
		<foobar>
			Some text here
		</foobar>
		<barbaz>
			<span>Some text here</span>
		</barbaz>
		<bazzaz>
			<foo>Some text here</foo>
		</bazzaz>
	</div>
	<div id="region1" class="region smallbox">
		<p></p>
	</div>
	<div id="region2" class="region smallbox">
		<p></p>
	</div>
	<div id="region3" class="region smallbox">
		<p></p>
	</div>
	
	<div id="result" class=""></div>
	<script type="text/javascript">
	var calls = { totalCalls: 0, individualCalls: {} },
		regionCalls = false;

	function setResult(value) {
		var tag = document.querySelector("#result");
		tag.innerHTML += value + "<br>";
		tag.classList.add(value.toLowerCase());
	}

	function contentEventHandlerForItem(item) {
		return function(evt) {
			calls.totalCalls++;
			calls.individualCalls[item].calls++;
			
			if (calls.totalCalls == 9) {
				var pass = true;
				for (var c in calls.individualCalls) {
					if (calls.individualCalls[c].calls !== 3) {
						pass = false;
					}
				}
				setResult(pass ? "PASS" : "FAIL");
				finishTest();
			}
		}
	}

	function regionChildEventHandler(evt) {
		regionCalls = true;
		setResult("FAIL");
		finishTest();
	}

	function finishTest() {
		if (window.testRunner) {
			testRunner.notifyDone();
		}
	}

	function testRegion(regionSelector) {
		if (window.testRunner) {
			var boxLocation = document.querySelector(regionSelector).getBoundingClientRect();
			eventSender.mouseMoveTo(boxLocation.left + 40, boxLocation.top + 50);
			eventSender.mouseDown();
			eventSender.mouseUp();

			eventSender.mouseMoveTo(boxLocation.left, boxLocation.top + 120);
			eventSender.mouseDown();
			eventSender.mouseUp();
		}
	}

	function runScriptedTest(contentSelectors) {
		if (window.testRunner) {
			testRunner.dumpAsText();
			testRunner.waitUntilDone();
			
			contentSelectors.forEach(function(item) {
				testRegion(item);
			})
		}
	}

	var events = [ "mouseover", "mouseout", "click" ],
		regionChildren = Array.prototype.slice.call(document.querySelectorAll(".region p")),
		contents = [ "#source foobar", "#source barbaz span", "#source foo" ];

	events.forEach(function(event) {
		regionChildren.forEach(function(item) {
			item.addEventListener(event, regionChildEventHandler);
		});
		contents.forEach(function(item) {
			calls.individualCalls[item] = {};
			calls.individualCalls[item].calls = 0;
			document.querySelector(item).addEventListener(event, contentEventHandlerForItem(item));
		});
	})

	runScriptedTest(contents);
	</script>
</body>
</html>